<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width:100px;height: 200px;background-color: yellowgreen;" id="divid" class="test" hello="world"> asdf </div>
    <input type="radio" checked>男
    <button disabled>按钮</button>

    <div id="abc123" data-id="abc456" data-user-name="张三">还得是老罗</div>
    <script>
        // var divele = document.getElementById('divid');
        // console.log(divele.className); // 因为class 是关键字 所以这里不能用class 
        // console.log(divele.style);
        // console.log(divele.hello); //hello 是自定义属性  拿不到
        // // 返回 undefined 
        // divele.className = 'kangbazi';
        // divele.style = 'width:200px;height: 300px;background-color: red;'
        // divele.hello = '打发打发舒服';
        // var inputEle = document.querySelector('input');// 返回符合要求的第一个
        // console.log(inputEle.checked)
        // inputEle.checked = false;


        //自定义属性的增删改查 
        var divele = document.getElementById('divid');
        // 增加 
        divele.setAttribute('我爱','北京天安门');
        console.log(divele.getAttribute('我爱'));
        
        //修改
        divele.setAttribute('我爱','中国');
        console.log(divele.getAttribute('我爱'));
        // 获取
        // console.log(divele.getAttribute('hello'));
        // 删除
        // divele.removeAttribute('hello');
        // console.log(divele.getAttribute('hello'));

        // 上面的方法能不能操作 h5自带属性  data-

        // var divEle = document.getElementById('abc123');
        
        // console.log(divEle.getAttribute('data-id'))
        // divEle.setAttribute('data-id','hello world')
        // console.log(divEle.getAttribute('data-id'))
        // divEle.setAttribute('data-age',18)
        // divEle.removeAttribute('data-user-name');

        // 可以操作h5自带属性 

        // 每个标签天生自带一个属性 dataset 
        // 是一个对象  
        // 包含所有data-开头的属性 

        var divEle = document.getElementById('abc123');
        // console.log(divEle.dataset,typeof divEle.dataset);
        // for(var v in divEle.dataset){
        //     // console.log(v)
        //     console.log(divEle.dataset[v])
        // }
        console.log(divEle.dataset.id);
        console.log(divEle.dataset.userName);
        console.log(divEle.dataset['userName']);
        


    </script>

</body>
</html>